<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="inc/taglibs.jsp" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <%@ include file="inc/meta.jsp" %>
    <meta name="description" content="">
    <meta name="author" content="">
    <title>控制面板</title>
    <%@ include file="inc/css.jsp" %>
</head>

<body>

<div id="posts" class="wrapper">
    <%@ include file="inc/nav.jsp" %>
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <input type="hidden" id="companyUserId" value="${companyUser.id}"/>
                <h1 class="page-header" style="text-align: center;">${companyUser.nickName}，欢迎进入三力视频广告主web端管理系统</h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>

        <c:if test="${companyUser.checkStatus != 1}">
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-danger">
                        <div class="panel-heading">
                            您的账户信息不完整，请尽快补全，补全信息后进行视频投放，点击进入<a href="company/info">账号中心</a>
                            <div style="float: right;cursor: pointer" onclick="_companyPanel.fn.clickHiddenDiv(this)">X</div>
                        </div>
                    </div>
                </div>
            </div>
        </c:if>

        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <a href="javascript:void(0)" onclick="_companyPanel.fn.recordMoney()" class="btn btn-outline btn-success btn-lg" role="button">充值</a>
                        <a href="company/video/show" class="btn btn-outline btn-info btn-lg" role="button">新增视频</a>
                        <span style="float: right;line-height: 50px;">今日支出：￥${todayMoney}&nbsp;&nbsp;|账户余额：￥${companyUser.money}&nbsp;&nbsp;|&nbsp;&nbsp;冻结资金：￥${companyUser.staticMoney}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="panel-body">
            <h3>我的广告</h3>

            <div class="col-sm-6">
                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                <div id="echart" style="height:400px"></div>
            </div>

            <div class="col-sm-6">
                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                <div id="echart0" style="height:400px"></div>
            </div>
        </div>

        <div class="panel-body">
            <h3>点击详情</h3>

            <div class="col-sm-12">
                <select class="form-control" style="width: 155px;float: right;margin-left: 10px;" id="dayList" onchange="_companyPanel.fn.changeStatData(this)">
                    <option value="0">请选择周期</option>
                    <option value="1">昨天</option>
                    <option value="7">7天内</option>
                    <option value="30">30天内</option>
                </select>
                <select class="form-control" style="width: 200px;float: right;" id="videoList" onchange="_companyPanel.fn.changeStatData2()">
                    <option value="">请选择广告名称</option>
                </select>
                <div id="echart1" style="height:400px"></div>
            </div>
        </div>

        <div class="panel-body">
            <h3>用户统计分布</h3>

            <div class="col-sm-6">
                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                <div id="echart2" style="height:400px"></div>
            </div>

            <div class="col-sm-6">
                <div id="echart3" style="height:400px"></div>
            </div>

            <div class="col-sm-6">
                <div id="echart4" style="height:400px"></div>
            </div>

            <div class="col-sm-6">
                <div id="echart5" style="height:400px"></div>
            </div>
        </div>

    </div>

</div>

<div class="modal fade" id="moneyModal" tabindex="-1" role="dialog" aria-labelledby="pwdModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">充值</h4>
            </div>
            <div class="modal-body">
                <div class="navbar-form" role="search">
                    <div class="form-group" style="margin-left: 20%">
                        <label>充值金额：</label>
                        <input type="number" id="money" name="money" class="form-control" onblur="_companyPanel.fn.changeMoney()" value="100"/>
                    </div>
                    <div class="form-group" style="margin-left: 20%">
                        <label></label>
                        *最低充值额度为100元
                    </div>
                    <div class="form-group" style="margin-left: 20%">
                        <label></label>
                        *每一次充值都会扣除15%手续费
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" onclick="_companyPanel.fn.toRecordMoney()" class="btn btn-primary">去支付</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<%@ include file="inc/footer.jsp" %>
</body>

<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
    var _companyPanel = {
        fn: {
            init: function () {
                // 路径配置
                require.config({
                    paths: {
                        echarts: 'http://echarts.baidu.com/build/dist'
                    }
                });

                _companyPanel.fn.getVideoList($('#companyUserId').val());

                _companyPanel.fn.getVideoStatData();

                _companyPanel.fn.getStatData(0);

                _companyPanel.fn.getStatUserData();
            },
            clickHiddenDiv: function (self) {
                $(self).parent().parent().parent().parent().remove();
            },
            getVideoStatData: function () {
                $leoman.ajax("common/getStatInfoByCompanyUserId", null, function (result) {
                    if (null != result) {
                        // 使用
                        require(
                                [
                                    'echarts',
                                    'echarts/chart/pie', // 使用柱状图就加载bar模块，按需加载
                                ],
                                function (ec) {
                                    // 基于准备好的dom，初始化echarts图表
                                    var myChart = ec.init(document.getElementById('echart'));

                                    var option = {
                                        title: {
                                            text: '',
                                            x: 'center'
                                        },
                                        tooltip: {
                                            trigger: 'item',
                                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                                        },
                                        legend: {
                                            orient: 'vertical',
                                            left: 'left',
                                            data: ['待审核', '投放中', '未投放']
                                        },
                                        series: [
                                            {
                                                name: '数量/比例',
                                                type: 'pie',
                                                radius: '55%',
                                                center: ['50%', '60%'],
                                                data: [
                                                    {value: result.clickList[0].count, name: '待审核'},
                                                    {value: result.clickList[1].count, name: '投放中'},
                                                    {value: result.clickList[2].count, name: '未投放'}
                                                ],
                                                itemStyle: {
                                                    emphasis: {
                                                        shadowBlur: 10,
                                                        shadowOffsetX: 0,
                                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                    }
                                                }
                                            }
                                        ]
                                    };

                                    // 为echarts对象加载数据
                                    myChart.setOption(option);

                                    // 基于准备好的dom，初始化echarts图表
                                    var myChart0 = ec.init(document.getElementById('echart0'));

                                    var option0 = {
                                        title: {
                                            text: '',
                                            x: 'center'
                                        },
                                        tooltip: {
                                            trigger: 'item',
                                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                                        },
                                        legend: {
                                            orient: 'vertical',
                                            left: 'left',
                                            data: ['一般形式', '红包形式', '其他形式']
                                        },
                                        series: [
                                            {
                                                name: '数量/比例',
                                                type: 'pie',
                                                radius: '55%',
                                                center: ['50%', '60%'],
                                                data: [
                                                    {value: result.moneyList[0].count, name: '一般形式'},
                                                    {value: result.moneyList[1].count, name: '红包形式'},
                                                    {value: result.moneyList[2].count, name: '其他形式'}
                                                ],
                                                itemStyle: {
                                                    emphasis: {
                                                        shadowBlur: 10,
                                                        shadowOffsetX: 0,
                                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                    }
                                                }
                                            }
                                        ]
                                    };

                                    // 为echarts对象加载数据
                                    myChart0.setOption(option0);
                                }
                        );
                    }
                });
            },
            getStatData: function (day) {
                $leoman.ajax("common/statVideoData", {
                    "day": day,
                    "videoId": $('#videoList option:selected').val()
                }, function (result) {
                    if (null != result) {
                        // 使用
                        require(
                                [
                                    'echarts',
                                    'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
                                    'echarts/chart/line' // 使用柱状图就加载line模块，按需加载
                                ],
                                function (ec) {
                                    var dayList = new Array();
                                    var valArray = new Array();
                                    var valArray2 = new Array();

                                    // 读取性别的名称数组
                                    for (var i = 0; i < result.clickList.length; i++) {
                                        if (Number(day) > Number(1)) {
                                            dayList.push(result.clickList[i].name.substring(5));
                                        } else {
                                            dayList.push(result.clickList[i].name + ':00');
                                        }
                                        valArray.push(result.clickList[i].count);
                                        valArray2.push(result.moneyList[i].count);
                                    }

                                    // 基于准备好的dom，初始化echarts图表
                                    var myChart = ec.init(document.getElementById('echart1'));

                                    var option = {
                                        tooltip: {
                                            trigger: 'axis'
                                        },
                                        legend: {
                                            data: ['点击量', '消耗金额']
                                        },
                                        xAxis: [
                                            {
                                                type: 'category',
                                                boundaryGap: false,
                                                data: dayList
                                            }
                                        ],
                                        yAxis: [
                                            {
                                                type: 'value'
                                            }
                                        ],
                                        series: [
                                            {
                                                name: '点击量',
                                                type: 'line',
                                                stack: '总量',
                                                data: valArray
                                            },
                                            {
                                                name: '消耗金额',
                                                type: 'line',
                                                stack: '总量',
                                                data: valArray2
                                            }
                                        ]
                                    };

                                    // 为echarts对象加载数据
                                    myChart.setOption(option);
                                }
                        );
                    }
                });
            },
            getVideoList: function (companyUserId) {
                $leoman.ajax("common/myVideoList", {
                    "companyUserId": companyUserId
                }, function (result) {
                    if (null != result) {
                        var content = "";
                        jQuery.each(result, function (i, item) {
                            content += "<option value='" + item.id + "'>" + item.name + "</option>";
                        });
                        $('#videoList').append(content);
                    } else {
                        $leoman.notify("获取广告列表信息失败", "error");
                    }
                });
            },
            changeStatData: function (self) {
                _companyPanel.fn.getStatData($(self).val());
            },
            changeStatData2: function () {
                _companyPanel.fn.getStatData($('#dayList option:selected').val());
            },
            getStatUserData: function () {
                $leoman.ajax("common/statUserData", {
                    companyUserId: $('#companyUserId').val()
                }, function (result) {
                    if (null != result) {
                        var nameArray = new Array();
                        var valArray = new Array();

                        // 使用
                        require(
                                [
                                    'echarts',
                                    'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
                                ],
                                function (ec) {
                                    nameArray = new Array();
                                    valArray = new Array();

                                    // 读取性别的名称数组
                                    for (var i = 0; i < result.sexList.length; i++) {
                                        nameArray.push(result.sexList[i].name);
                                        valArray.push(result.sexList[i].content);
                                    }

                                    // 基于准备好的dom，初始化echarts图表
                                    var myChart2 = ec.init(document.getElementById('echart2'));

                                    var option2 = {
                                        tooltip: {
                                            show: true
                                        },
                                        title: {
                                            show: true,
                                            text: '性别'
                                        },
                                        legend: {
                                            data: ['百分比'],
                                            show: false
                                        },
                                        xAxis: [
                                            {
                                                type: 'category',
                                                data: nameArray
                                            }
                                        ],
                                        yAxis: [
                                            {
                                                type: 'value'
                                            }
                                        ],
                                        series: [
                                            {
                                                "name": "百分比",
                                                "type": "bar",
                                                barWidth: 80,
                                                "itemStyle": {
                                                    normal: {
                                                        color: '#87CEEB'
                                                    }
                                                },
                                                "data": valArray
                                            }
                                        ]
                                    };

                                    // 为echarts对象加载数据
                                    myChart2.setOption(option2);


                                    nameArray = new Array();
                                    valArray = new Array();

                                    // 读取性别的名称数组
                                    for (var i = 0; i < result.ageList.length; i++) {
                                        nameArray.push(result.ageList[i].name);
                                        valArray.push(result.ageList[i].content);
                                    }
                                    // 基于准备好的dom，初始化echarts图表
                                    var myChart3 = ec.init(document.getElementById('echart3'));

                                    var option3 = {
                                        tooltip: {
                                            show: true
                                        },
                                        title: {
                                            show: true,
                                            text: '年龄'
                                        },
                                        legend: {
                                            data: ['百分比'],
                                            show: false
                                        },
                                        xAxis: [
                                            {
                                                type: 'category',
                                                data: nameArray
                                            }
                                        ],
                                        yAxis: [
                                            {
                                                type: 'value'
                                            }
                                        ],
                                        series: [
                                            {
                                                "name": "百分比",
                                                "type": "bar",
                                                "itemStyle": {
                                                    normal: {
                                                        color: '#87CEEB'
                                                    }
                                                },
                                                "data": valArray
                                            }
                                        ]
                                    };

                                    // 为echarts对象加载数据
                                    myChart3.setOption(option3);


                                    nameArray = new Array();
                                    valArray = new Array();

                                    // 读取性别的名称数组
                                    for (var i = 0; i < result.provinceList.length; i++) {
                                        nameArray.push(result.provinceList[i].name);
                                        valArray.push(result.provinceList[i].content);
                                    }
                                    // 基于准备好的dom，初始化echarts图表
                                    var myChart4 = ec.init(document.getElementById('echart4'));

                                    var option4 = {
                                        tooltip: {
                                            show: true
                                        },
                                        title: {
                                            show: true,
                                            text: '排名前6的省份'
                                        },
                                        legend: {
                                            data: ['百分比'],
                                            show: false
                                        },
                                        xAxis: [
                                            {
                                                type: 'category',
                                                data: nameArray
                                            }
                                        ],
                                        yAxis: [
                                            {
                                                type: 'value'
                                            }
                                        ],
                                        series: [
                                            {
                                                "name": "百分比",
                                                "type": "bar",
                                                "itemStyle": {
                                                    normal: {
                                                        color: '#87CEEB'
                                                    }
                                                },
                                                "data": valArray
                                            }
                                        ]
                                    };

                                    // 为echarts对象加载数据
                                    myChart4.setOption(option4);


                                    nameArray = new Array();
                                    valArray = new Array();

                                    // 读取性别的名称数组
                                    for (var i = 0; i < result.cityList.length; i++) {
                                        nameArray.push(result.cityList[i].name);
                                        valArray.push(result.cityList[i].content);
                                    }
                                    // 基于准备好的dom，初始化echarts图表
                                    var myChart5 = ec.init(document.getElementById('echart5'));

                                    var option5 = {
                                        tooltip: {
                                            show: true
                                        },
                                        title: {
                                            show: true,
                                            text: '排名前6的城市'
                                        },
                                        legend: {
                                            data: ['百分比'],
                                            show: false
                                        },
                                        xAxis: [
                                            {
                                                type: 'category',
                                                data: nameArray
                                            }
                                        ],
                                        yAxis: [
                                            {
                                                type: 'value'
                                            }
                                        ],
                                        series: [
                                            {
                                                "name": "百分比",
                                                "type": "bar",
                                                "itemStyle": {
                                                    normal: {
                                                        color: '#87CEEB'
                                                    }
                                                },
                                                "data": valArray
                                            }
                                        ]
                                    };

                                    // 为echarts对象加载数据
                                    myChart5.setOption(option5);
                                }
                        );
                    }
                });
            },
            recordMoney: function () {
                $('#moneyModal').modal('show');
            },
            changeMoney: function () {
                var flag = true;
                var money = $('#money').val();

                if (null == money || money == '') {
                    $leoman.notify("请输入充值金额", "error");
                    flag = false;
                    return;
                }

                if (Number(money) < Number(100)) {
                    $leoman.notify("充值金额最低为100元", "error");
                    flag = false;
                    return;
                }

                return flag;
            },
            toRecordMoney: function () {
                if (_companyPanel.fn.changeMoney()) {
                    // 校验通过后，生成充值订单
                    $.ajax({
                        dataType: 'json',
                        url: '${contextPath}/company/productMoney',
                        data: {
                            money: $('#money').val()
                        },
                        success: function (data) {
                            if (data > 0) {
                                window.location.href = '${contextPath}/company/toRecordMoney?money=' + $('#money').val() + "&orderNum=" + data;
                            } else {
                                alert('生成订单失败');
                            }
                        }
                    });
                }
            }
        }
    }

    $(document).ready(function () {
        _companyPanel.fn.init();
    });
</script>

</html>